<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Record</title>
        <link href="../resources/css/bootstrap.css" rel="stylesheet">
        <link href="../resources/css/bootstrap-toggle.min.css" rel="stylesheet">
        <link href="../resources/css/style.css" rel="stylesheet">
    </head>
    <body>
        <nav class="navbar navbar-default bg-primary navbar-fixed-top ">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand navbar-logo" width="120" href="#"><img src="../resources/images/introlab_icon.png"></a>
                        <a class="navbar-brand" width="120" href="#"><span>ODAS Studio</span></a>
                    </div>
                </div>
            </nav>
        <div id="recordings-table" class="content">
          <div class="container-fluid" style="position:fixed; top:50px; width:100%; background-color:white;  z-index:10; padding-top:10px">
            <form action="#">
              <div class="form-group row">
                <div class="col-xs-3">
                  <label style="padding-top:6px" class="col-form-label">Workspace Path</label>
                </div>
                <div class="col-xs-7">
                  <input class="form-control" v-model="workspacePath" placeholder="Not defined" onclick="changeWorkspace()"/></input>
                </div>
                <div class="col-xs-2">
                  <button type="button" style="width:100%" class="btn btn-primary" onclick="changeWorkspace()">Change</button>
                </div>
              </div>
            <div class="form-group row">
                  <div class="col-xs-3">
                    <label class="col-form-label">Show</label>
                  </div>
                  <div class="col-xs-7">
                    <select class="form-control" v-model="filter" onchange="">
                      <option value="pf">Post-filtered</option>
                      <option value="sp">Separated</option>
                      <option value="">All</option>
                    </select>
                  </div>
                  <div class="col-xs-2">
                      <button type="button" style="width:100%" class="btn btn-danger" onclick="deleteAll()">Delete All</button>
                  </div>
              </div>
              <div class="form-group row">
                <div class="col-xs-3">
                  <label class="col-form-label">Record</label>
                </div>
                <div class="col-xs-9 form-check">
                    <input class="form-check-input" v-model="recordingEnabled" type="checkbox" onchange="recordControl()">
                    <label class="form-check-label">Determine if separated audio is recorded</label>
                  </input>
                </div>
              </div>
            </form>
          </div>
          <div class="bg-primary" style="height:1.5px; position:fixed; top:188px; width:100%; z-index:15"></div>
          <div class="container-fluid" style="padding-top:190px; padding-bottom:136.5px;">
            <div class="row">
              <div class="col-md-12">
                <div style="position:fixed; top: 190px; width:100%; background-color:white; padding-bottom:0px; z-index:10">
                  <table class="table table-hover" style="margin-bottom:0px">
                    <thead>
                      <tr>
                        <th>Play</th>
                        <th>Timestamp</th>
                        <th>Duration</th>
                        <th>Filename</th>
                        <th>Delete</th>
                      </tr>
                    </thead>
                    </table>
                </div>
                  <div style="overflow: auto; padding-top: 36px; z-index:-10;">
                  <table  class="table table-hover">
                      <tbody>
                        <tr v-for = "recording in selectedFuzzyRecordings" v-on:mouseenter = "hovering = recording;" v-on:mouseleave = "hovering = null;">
                          <td><span class="glyphicon glyphicon-record text-danger"></span></td>
                          <td>{{recording.timestamp.toLocaleString()}}</td>
                          <td></td>
                          <td>{{recording.filename}}</td>
                          <td></td>
                        </tr>
                        <tr v-for = "recording in selectedRecordings" v-on:mouseenter = "hovering = recording;" v-on:mouseleave = "hovering = null; recording.deleting = 'hidden'">
                          <td>
                            <span v-if="!recording.isPlaying" class="control glyphicon glyphicon-play" v-on:click = "recording.play()"></span>
                            <span v-else class="control glyphicon glyphicon-stop" v-on:click = "recording.stop()"></span>
                          </td>
                          <td>{{recording.timestamp.toLocaleString()}}</td>
                          <td>{{recording.duration.toFixed(2)}} s</td>
                          <td>{{recording.filename}}</td>
                          <td>
                            <span class="control glyphicon glyphicon-remove" v-on:click = "recording.deleting = 'visible'"></span>
                            <a class="text-danger" v-bind:style="{visibility:recording.deleting}"  href="#" v-on:click = "removeRecording(recording.path)" style="float:right">Sure</a>
                          </td>
                        </tr>
                      </tbody>
                      </table>
                    </div>
              </div>
            </div>
          </div>
          <div style="width:100%; height:1.5px; position: fixed; bottom: 151px; z-index:15;" class="bg-primary"></div>
          <div class="container-fluid" style="position: fixed; bottom: 30px; height: 120px; width: 100%; background-color:white;">
              <label style="margin-top: 10px">Transcript</label>
              <p>{{transcription}}</p>
          </div>
        </div>
        <footer class="footer" style="position: fixed">
            <div class="container-fluid">
                <div class="row">
                    <p class="col-xs-10 text-muted">Graphic interface for ODAS library</p>
                    <a href="javascript:quit()" class="col-xs-2 text-right">Close</a>
                </div>
            </div>
        </footer>

        <script>window.$ = window.jQuery = require('./../resources/js/jquery.min.js');</script>
        <script src="./../resources/js/bootstrap.min.js"></script>
        <script src="./../resources/js/bootstrap-toggle.min.js"></script>
        <script src="./../resources/js/vue.js"></script>

        <script src="./../resources/js/recordings_model.js"></script>
    </body>
</html>
